import React, {Component} from 'react';
import moment from 'moment';
import ReactPaginate from 'react-paginate';
import Category from './Category'
export  default class Posts extends Component {
  constructor(props) {
    super(props);
  }

  createMarkup(html) {
    return {__html: html};
  }
  render() {
    let {postList, totalPages, handlePageClick, getCategoryParams, getPageParams, categories} = this.props;
    console.log(categories)
    return (
      <div>
        {
          (() => {
            let currentSlug = getCategoryParams();
            let currentCate = categories.filter(cat => {
              return cat.slug == currentSlug
            })
            if (currentSlug && currentCate.length) {
              return (
                <div className="pb20 tac list_title">
                  <div className="paper dib paper_white shadow cover sticker">
                    <p>{currentCate[0]['name']}下所有文章</p>
                  </div>
                </div>
              )
            }
          })()
        }
        {
          postList && postList.map( post => {
            return (
              <div className="line_paper mb20 shadow sticker" key={post.id}>
                <h3><a href="#">{post.title.rendered}</a></h3>
                <div className="arc_meta">
                  <time className="metaItem">{moment(post.date).format('YYYY-MM-DD')}</time>
                  <span>|</span>
                  <Category cate={post.cateGory} />
                  <span>|</span>
                  <span><a href="#" className="comments-link">{post.commentsNo} 条评论</a></span>
                </div>
                <div className="arc_cont mb10" dangerouslySetInnerHTML={this.createMarkup(post.excerpt.rendered)}>
                </div>

                <div className="tar">
                  <a href="#" className="paper btn paper_purple">阅读全文</a>
                </div>
              </div>
            )
          })
        }
        <div className="mt20 mb20 tac">


          <ReactPaginate previousLabel={"上一页"}
                         nextLabel={"下一页"}
                         breakLabel={<a href="">...</a>}
                         pageNum={totalPages}
                         marginPagesDisplayed={2}
                         pageRangeDisplayed={5}
                         clickCallback={handlePageClick}
                         containerClassName={"pagination"}
                         subContainerClassName={"pages pagination"}
                         forceSelected={getPageParams()-1}
                         activeClassName={"active"}/>
        </div>
      </div>
    );
  }
}
